<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<h3 class="title">单选框：绑定的是布尔值</h3>
			<input type="checkbox" v-model="checked">
			<label for="checkbox">checked:{{checked}}</label>

			<h3 class="title">复选框：绑定的是一个数组</h3>
			<input type="checkbox" value="阅读" v-model="hobbies">
			<label for="reading">阅读</label>
			<input type="checkbox" value="跑步" v-model="hobbies">
			<label for="running">跑步</label>
			<input type="checkbox" value="睡觉" v-model="hobbies">
			<label for="sleeping">睡觉</label>
			<input type="checkbox" value="唱歌" v-model="hobbies">
			<label for="singing">唱歌</label>
			<p class="hobbies">你的爱好是：{{hobbies}}</p>
			<button @click="selectAll">全选</button>
			<button @click="reverseSelect">反选</button>
			<button @click="selectNone">全不选</button>
		</div>

		<script>
			new Vue({
				el: '#box',
				data: {
					checked: true,
					hobbies: [],
					allHobbies: ["阅读", "跑步", "睡觉", "唱歌"],
					helpArray: []
				},
				methods: {
					selectAll: function() { //全选
						this.hobbies = this.allHobbies;
					},
					reverseSelect: function() { //反选
						this.helpArray = []
						for (let i = 0; i < this.allHobbies.length; i++) {
							if (!this.hobbies.includes(this.allHobbies[i])) {
								this.helpArray.push(this.allHobbies[i])
							}
						}
						this.hobbies = this.helpArray
					},
					selectNone: function() { //
						this.hobbies = []
					}
				}
			})
		</script>
	</body>
</html>
